<!DOCTYPE HTML>
<html>
<head>
    <!-- support for mobile touch devices -->
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

    <!-- twitter bootstrap CSS stylesheet - not required by cornerstoneTools -->
    <link href="../bootstrap.min.css" rel="stylesheet">

    <link href="../cornerstone.min.css" rel="stylesheet">

</head>
<body>
<div class="container">
    <div class="page-header">
        <h1>
            All Image Tools Example
        </h1>
        <p>
            This page contains an example of all image tools
        </p>
        <a href="../index.html">Go back to the Examples page</a>
    </div>

    <br>

    <div class="row">
        <div class="col-xs-2">
            <ul class="list-group">
                <a id="enableWindowLevelTool" class="list-group-item">WW/WC</a>
                <a id="pan" class="list-group-item">Pan</a>
                <a id="zoom" class="list-group-item">Zoom</a>
                <a id="enableLength" class="list-group-item">Length</a>
                <a id="probe" class="list-group-item">Probe</a>
                <a id="circleroi" class="list-group-item">Elliptical ROI</a>
                <a id="rectangleroi" class="list-group-item">Rectangle ROI</a>
                <a id="angle" class="list-group-item">Angle</a>
                <a id="highlight" class="list-group-item">Highlight</a>
                <a id="freehand" class="list-group-item">Freeform ROI</a>
                <a id="eraser" class="list-group-item">Eraser</a>
            </ul>
            <div class="checkbox">
              <label><input type="checkbox" id="chkshadow">Apply shadow</label>
            </div>
            <br/>
        </div>
        <div class="col-xs-10">
            <div style="width:512px;height:512px;position:relative;display:inline-block;color:white;"
                 oncontextmenu="return false"
                 class='cornerstone-enabled-image'
                 unselectable='on'
                 onselectstart='return false;'
                 onmousedown='return false;'>
                <div id="dicomImage"
                     style="width:512px;height:512px;top:0px;left:0px; position:absolute;">
                </div>
                <div id="mrtopleft" style="position: absolute;top:3px; left:3px">
                    Patient Name
                </div>
                <div id="mrtopright" style="position: absolute;top:3px; right:3px">
                    Hospital
                </div>
                <div id="mrbottomright" style="position: absolute;bottom:3px; right:3px">
                    Zoom:
                </div>
                <div id="mrbottomleft" style="position: absolute;bottom:3px; left:3px">
                    WW/WC:
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <h3>Functionality</h3>
            <ul>
                <li>Activation of a tool for the left mouse button
                    <ul>
                        <li>WW/WC - Adjust the window width and window center of the image (activated by default)</li>
                        <li>Pan - Pan the image</li>
                        <li>Zoom - Zoom the image</li>
                        <li>Length - Length measurement tool</li>
                        <li>Probe - Display the image x,y coordinate under cursor as well as the pixel value (stored pixel and modality)</li>
                        <li>Elliptical ROI - An elliptical ROI that shows mean, stddev and area</li>
                        <li>Rectangle ROI - A rectangular ROI that shows mean, stddev and area</li>
                        <li>Highlight - Darkens the image around a rectangular ROI</li>
                        <li>Angle - Cobb angle tool</li>
                        <li>Eraser - Erases marks from other tools</li>
                    </ul>
                </li>
                <li>Use the activated tool by dragging the left mouse button</li>
                <li>Pan by dragging the middle mouse button</li>
                <li>Zoom by dragging the right mouse button</li>
                <li>Zoom by rolling the mouse wheel</li>
                <li>Tool dragging - left click drag on any measurement tool line to move it</li>
                <li>Tool deletion - left click drag on any measurement tool line and drop it off the image to delete it</li>
                <li>Tool handles - left click drag on any measurement tool handle (the circle) to change the handles position</li>
            </ul>
        </div>
    </div>
</body>

<!-- include the cornerstone library -->
<script src="../cornerstone.min.js"></script>

<script src="../cornerstoneMath.min.js"></script>


<!-- include the cornerstone tools library -->
<script src="../../dist/cornerstoneTools.js"></script>
<script>window.cornerstoneTools || document.write('<script src="https://unpkg.com/cornerstone-tools">\x3C/script>')</script>

<!-- include special code for these examples which provides images -->
<script src="../exampleImageLoader.js"></script>

<script>
    var element = document.getElementById('dicomImage');

    // Listen for changes to the viewport so we can update the text overlays in the corner
    function onImageRendered(e) {
        var viewport = cornerstone.getViewport(e.target);
        document.getElementById('mrbottomleft').textContent = "WW/WC: " + Math.round(viewport.voi.windowWidth) + "/" + Math.round(viewport.voi.windowCenter);
        document.getElementById('mrbottomright').textContent = "Zoom: " + viewport.scale.toFixed(2);
    };

    element.addEventListener('cornerstoneimagerendered', onImageRendered);

    var imageId = 'example://1';

    var config = {
        // invert: true,
        minScale: 0.25,
        maxScale: 20.0,
        preventZoomOutsideImage: true
    };

    cornerstoneTools.zoom.setConfiguration(config);

    document.getElementById('chkshadow').addEventListener('change', function(){
      cornerstoneTools.length.setConfiguration({shadow: this.checked});
      cornerstoneTools.angle.setConfiguration({shadow: this.checked});
      cornerstone.updateImage(element);
    });

    // image enable the dicomImage element
    cornerstone.enable(element);
    cornerstone.loadImage(imageId).then(function(image) {
        cornerstone.displayImage(element, image);
        cornerstoneTools.mouseInput.enable(element);
        cornerstoneTools.mouseWheelInput.enable(element);
        // Enable all tools we want to use with this element
        cornerstoneTools.wwwc.activate(element, 1); // ww/wc is the default tool for left mouse button
        cornerstoneTools.pan.activate(element, 2); // pan is the default tool for middle mouse button
        cornerstoneTools.zoom.activate(element, 4); // zoom is the default tool for right mouse button
        cornerstoneTools.zoomWheel.activate(element); // zoom is the default tool for middle mouse wheel
        cornerstoneTools.probe.enable(element);
        cornerstoneTools.length.enable(element);
        cornerstoneTools.ellipticalRoi.enable(element);
        cornerstoneTools.rectangleRoi.enable(element);
        cornerstoneTools.angle.enable(element);
        cornerstoneTools.highlight.enable(element);
        cornerstoneTools.eraser.enable(element);

        activate("enableWindowLevelTool");

        function activate(id) {
            document.querySelectorAll('a').forEach(function(elem) {
                elem.classList.remove('active');
            });

            document.getElementById(id).classList.add('active');
        }

        // helper function used by the tool button handlers to disable the active tool
        // before making a new tool active
        function disableAllTools()
        {
            cornerstoneTools.wwwc.disable(element);
            cornerstoneTools.pan.activate(element, 2); // 2 is middle mouse button
            cornerstoneTools.zoom.activate(element, 4); // 4 is right mouse button
            cornerstoneTools.probe.deactivate(element, 1);
            cornerstoneTools.length.deactivate(element, 1);
            cornerstoneTools.ellipticalRoi.deactivate(element, 1);
            cornerstoneTools.rectangleRoi.deactivate(element, 1);
            cornerstoneTools.angle.deactivate(element, 1);
            cornerstoneTools.highlight.deactivate(element, 1);
            cornerstoneTools.freehand.deactivate(element, 1);
            cornerstoneTools.eraser.deactivate(element, 1);
        }

        // Tool button event handlers that set the new active tool
        document.getElementById('enableWindowLevelTool').addEventListener('click', function() {
            activate('enableWindowLevelTool')
            disableAllTools();
            cornerstoneTools.wwwc.activate(element, 1);
        });
        document.getElementById('pan').addEventListener('click', function() {
            activate('pan')
            disableAllTools();
            cornerstoneTools.pan.activate(element, 3); // 3 means left mouse button and middle mouse button
        });
        document.getElementById('zoom').addEventListener('click', function() {
            activate('zoom')
            disableAllTools();
            cornerstoneTools.zoom.activate(element, 5); // 5 means left mouse button and right mouse button
        });
        document.getElementById('enableLength').addEventListener('click', function() {
            activate('enableLength')
            disableAllTools();
            cornerstoneTools.length.activate(element, 1);
        });
        document.getElementById('probe').addEventListener('click', function() {
            activate('probe')
            disableAllTools();
            cornerstoneTools.probe.activate(element, 1);
        });
        document.getElementById('circleroi').addEventListener('click', function() {
            activate('circleroi')
            disableAllTools();
            cornerstoneTools.ellipticalRoi.activate(element, 1);
        });
        document.getElementById('rectangleroi').addEventListener('click', function() {
            activate('rectangleroi')
            disableAllTools();
            cornerstoneTools.rectangleRoi.activate(element, 1);
        });
        document.getElementById('angle').addEventListener('click', function () {
            activate('angle')
            disableAllTools();
            cornerstoneTools.angle.activate(element, 1);
        });
        document.getElementById('highlight').addEventListener('click', function() {
            activate('highlight')
            disableAllTools();
            cornerstoneTools.highlight.activate(element, 1);
        });
        document.getElementById('freehand').addEventListener('click', function() {
            activate('freehand')
            disableAllTools();
            cornerstoneTools.freehand.activate(element, 1);
        });
        document.getElementById('eraser').addEventListener('click', function() {
            activate('eraser');
            disableAllTools();

            // In order for the eraser to work, other tools must be in the 'enable'
            // state. This allows eraser to receive mouse click events on other tools'
            // data.
            cornerstoneTools.probe.enable(element, 1);
            cornerstoneTools.length.enable(element, 1);
            cornerstoneTools.ellipticalRoi.enable(element, 1);
            cornerstoneTools.rectangleRoi.enable(element, 1);
            cornerstoneTools.angle.enable(element, 1);
            cornerstoneTools.highlight.enable(element, 1);
            cornerstoneTools.freehand.enable(element, 1);
            cornerstoneTools.eraser.enable(element, 1);

            cornerstoneTools.eraser.activate(element, 1);
        })
    });



</script>
</html>
